{extend name='public/modal'}
{block name='content'}
<script src="/old/shipline_files/vue.js" type="text/javascript"></script>
<link href="/old/shipline_files/vant-2.9.min.css" rel="stylesheet"/>
<script src="/old/shipline_files/vant-2.9.min.js" type="text/javascript"></script>

<style>
    .flexBetween {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .layui-form-label {
        width: 210px !important;
    }

    .layui-form-item {
        display: flex;
    }

    .layui-input-block {
        margin-left: 0 !important;
        width: 100%
    }
</style>

<div class="layui-fluid lotus-form">
    <div style="font-weight: 600; line-height: 40px">订单信息</div>
    <div class="layui-row">
        <form action="shiporderadd.html" class="layui-form layui-form-pane" id="lotus-add-form" method="post">
            <input name="shiporder_id" type="hidden" value="{$shiporder.shiporder_id}"/>

            <div class="layui-form-item">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-block">
                    <select name="status">
                        {volist name='ShipOrderStatus' id='vo' }
                        <option {if condition="$shiporder.status eq $key"} selected{/if} value="{$key}">{$vo}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            {if condition="($shiporder.tc_order_no !== '')"}
            <div class="layui-form-item">
                <label class="layui-form-label">船票订单号</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled id="user_id" name="user_id"
                           type="text" value="{$shiporder.tc_order_no}">
                </div>
            </div>
            {/if}

            <div class="layui-form-item">
                <label class="layui-form-label">客户ID</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled id="user_id" lay-verify="required"
                           name="user_id"
                           type="text" value="{$shiporder.user_id}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系人</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled id="contact_name" lay-verify="required"
                           name="contact_name" type="text" value="{$shiporder.contact_name}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预定电话</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled id="booking_tel" lay-verify="required"
                           name="booking_tel" type="text" value="{$shiporder.booking_tel}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">座位</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.chooseSeat.SeatName}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">路线名称</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.chooseFlight.ShipName}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发港口</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.chooseFlight.FromPortName}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到达港口</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.chooseFlight.ToPortName}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">运行时间</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.chooseFlight.ShipRunMinutes}分钟">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发时间</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.chooseFlight.DepartureDate}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到达时间</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.chooseFlight.ArriveTime}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">申请退票日期</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled type="text"
                           value="{$shiporder.apply_refund_time}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商家退单结果</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.tc_refund_Result}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商家退单手续费</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                           type="text" value="{$shiporder.tc_ServiceCharge}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">出票说明</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input"
                           type="text" value="{$shiporder.response ? $shiporder.response.message : ''}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">座位详情</label>
                <div class="layui-input-block">
                    <a href="{$shiporder.ticket_url}" target="_blank">
                        <input autocomplete="off" class="layui-input" disabled lay-verify="required"
                               type="text" value="{$shiporder.ticket_url}">
                    </a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">支付单号</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled type="text"
                           value="{$shiporder.out_trade_no}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" id="remark" name="remark" type="text"
                           value="{$shiporder.remark}">
                </div>
            </div>

            <div id="app">
                <div v-if="refundInfo.length>0">
                    <div style="font-weight: 600; line-height: 40px; ">退票信息</div>
                    <div style="width: 60%;padding: 10px;float: left;" v-for="(item,index) in refundInfo">
                        <div style="border: 1px solid #ff0000"
                            v-for="(val) in item.refund_list">
                            <div style="padding: 10px;border-radius: 10px;background: #ffffff;font-size: 14px;">
                                <div class="flexBetween">
                                    <div>姓名:{{val.username}}</div>
                                    <div>航班时间:{$shiporder.chooseFlight.DepartureDate}</div>
                                </div>
                                <div class="flexBetween" style="margin-top:10px;">
                                    <div>票价:{{val.TicketPrice}}</div>
                                    <div>手续费:{{val.ProcessingFee}}</div>
                                    <div>退款金额:{{val.RefundAmount}}</div>
                                </div>
                            </div>
                        </div>
                        <div style="line-height: 40px">退款总额:{{item.refund_amount}}元</div>
                    </div>
                </div>
                <div v-if="changeVoyages">
                    <div style="font-weight: 600; line-height: 40px">改签信息</div>
                    <div :index="item.id" v-for="item in changeVoyages">
                        <div class="layui-form-item">
                            <label class="layui-form-label">航班名称</label>
                            <div class="layui-input-block">
                                <input :value="item.body_arr.shipName" autocomplete="off" class="layui-input" disabled
                                       type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">航班座位</label>
                            <div class="layui-input-block">
                                <input :value="item.body_arr.cabinName" autocomplete="off" class="layui-input" disabled
                                       type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">出发日期</label>
                            <div class="layui-input-block">
                                <input :value="item.body_arr.date" autocomplete="off" class="layui-input" disabled
                                       type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div style="font-weight: 600; line-height: 40px">游客信息</div>
                <div style="width: 60%;padding: 10px;float: left;">
                    <div :key="index" style="border: 1px solid #ff0000"
                         v-for="(item,index) in shiporder.contact_list">
                        <div style="padding: 10px;border-radius: 10px;background: #ffffff;font-size: 14px;">
                            <div class="flexBetween">
                                <div>姓名:{{item.username}}</div>
                                <div>证件信息:{{item.id_type}} {{item.id_num}}</div>
                            </div>
                            <div class="flexBetween" style="margin-top:10px;">
                                <div>旅客类型:{{item.tourist_type}}</div>
                                <div>票价:{{item.TicketPrice}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 30%;padding: 10px;float: left;">
                    <p>无座位小童信息</p>
                    <div v-for="(child,index) in shiporder_take_children">
                        {{child.child_name}}&nbsp;&nbsp;
                        {{child.id_num}}
                    </div>
                </div>
                <div ref="changeVoyages" style="display: none">
                    <?php echo json_encode($changeVoyages);?>
                </div>
            </div>

            <div class="layui-form-item">
                <div>
                    <button class="layui-btn" lay-filter="toSubmit" lay-submit="">提交</button>
                    <button class="layui-btn layui-btn-primary" id="reset" type="reset">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>


<script>

    var vm = new Vue({
        el: '#app',
        data: {
            shiporder: {:json_encode($shiporder)},
            shiporder_take_children: {:json_encode($shiporder_take_children)},
            changeVoyages: [],
            refundInfo: {:json_encode($refundInfo)},
        },
        mounted()
        {
            this.changeVoyages = eval(this.$refs.changeVoyages.innerHTML);
            console.log(this.changeVoyages)
        },

        methods: {
        },
    });

    layui.use(['laydate', 'form', 'upload', 'layer', 'jquery'], function () {
        var laydate = layui.laydate
            , upload = layui.upload
            , layer = layui.layer
            , $ = layui.jquery
            , form = layui.form;
        form.render();

        laydate.render({
            elem: '#push_time' //指定元素
            , type: 'datetime'
        });
        var uploadInst = upload.render({
            elem: '#cover_upload_btn' //绑定元素
            , url: '{:url("/index/login/upload")}'
            , size: 10240
            , accept: 'images'
            , multiple: true
            , auto: true
            , acceptMime: 'image/jpg, image/png'
            , done: function (res, index, upload) {
                // console.log(res);
                // img[img_num] = res.src;
                $(".cover_upload_img").html("");
                $("#pic_url").val(res.data.src);
                $(".cover_upload_img").append("<img style='width: 200px;' src='" + res.data.src + "'>");
                // console.log(img);
                layer.msg("上传成功", {icon: 6});
            }
            , error: function () {
                layer.msg("上传失败", {icon: 5});
            }
            , choose: function (obj) {
                layer.msg("正在上传...");
            }
        });


        form.on('select(province)', function (data) {
            var province = data.value; //得到被选中的值
            $.ajax({
                url: '{:url("admin/shiporder/shiporderlist")}',
                type: 'get',
                dataType: 'html',
                data: {province: province},
                success: function (e) {
                    $('#city').html(e);
                    $('#district').html('');
                    form.render('select');
                    console.log(e)
                }
            })
        });

        form.on('submit(*)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    });
</script>

{/block}




